<style include="settings-shared md-select">
  #portNumberInput {
    padding-inline-end: 20px;
    width: 376px;
  }

  #portLabelInput {
    padding-top: 20px;
    width: 472px;
  }

  #selectProtocol {
    max-width: 96px;
  }

  .custom-body {
    padding-bottom: 20px;
  }

  .custom-button-container {
    float: right;
  }

  .input-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .placeholder-label {
    visibility: hidden;
  }
</style>
<cr-dialog id="dialog" close-text="$i18n{close}">
  <div slot="title">$i18n{crostiniPortForwardingAddPortDialogTitle}</div>
  <div slot="body">
    <div class="input-container">
      <cr-input id="portNumberInput"
          label="$i18n{crostiniPortForwardingAddPortDialogPortNumberLabel}"
          aria-disabled="false"
          error-message="[[portState_]]"
          type="number"
          min="1024"
          max="65535"
          on-blur="onBlur_">
      </cr-input>
      <div>
        <div id="label" class="cr-form-field-label placeholder-label"
            aria-hidden="true">
            ""
        </div>
        <select id="selectProtocol"
            class="md-select"
            value="$i18n{crostiniPortForwardingTCP}"
            on-change="onSelectProtocol_">
          <option value="$i18n{crostiniPortForwardingTCP}">
            $i18n{crostiniPortForwardingTCP}
          </option>
          <option value="$i18n{crostiniPortForwardingUDP}">
            $i18n{crostiniPortForwardingUDP}
          </option>
        </select>
      </div>
    </div>
    <div slot="body">
      <cr-input id="portLabelInput"
          label="$i18n{crostiniPortForwardingAddPortDialogLabelLabel}"
          aria-disabled="false"
          maxlength="50">
      </cr-input>
    </div>
  </div>
  <div slot="body" class="custom-body">
    <div slot="button-container" class="custom-button-container">
      <cr-button id="cancel" class="cancel-button"
          on-click="onCancelTap_">$i18n{cancel}</cr-button>
      <cr-button id="continue" class="action-button"
          on-click="onAddTap_">
          $i18n{add}
      </cr-button>
    </div>
  </div>
</cr-dialog>
